<template>
	<view class="product-detail-page" v-if="productInfo" >
		<!-- 自定义导航栏 -->
		<u-navbar placeholder :autoBack="true" title="商品详情" bgColor="#fff">
			<view slot="left" class="back-btn">
				<u-icon name="arrow-left" size="20" color="#333333"></u-icon>
			</view>
		</u-navbar>

		<!-- 商品图片 -->
		<view class="product-image-section">
			<image :src="productInfo.image" mode="aspectFill" class="product-image"></image>
		</view>

		<!-- 商品信息 -->
		<view class="product-info-section">
			<view class="product-name">{{ productInfo.name }}</view>
			<view class="price-section">
				<view class="price-info">
					<text class="currency">￥</text>
					<text class="price">{{ productInfo.price }}</text>
				</view>
				<view class="add-btn" @click="showProductDetailPopup">
					<u-icon name="plus" size="20" color="#FFFFFF"></u-icon>
				</view>
			</view>
			<view class="sales-info">已售{{ productInfo.saleCount || 0 }}</view>
		</view>

		<!-- 分割线 -->
		<view class="divider"></view>

		<!-- 商品描述 -->
		<view class="product-description">
			<view class="section-title">商品描述</view>
			<view class="description-item" v-if="productInfo.introduce">商品介绍：{{ productInfo.introduce }}</view>
			<!-- <view class="description-item">已售数量：{{ productInfo.saleCount || 0 }}份</view>
			<view class="description-item" v-if="productInfo.vipPrice">会员价：¥{{ productInfo.vipPrice }}</view> -->
		</view>


		<!-- 底部操作栏 -->
		<!-- <view class="bottom-action-bar">
			<view class="cart-info" @click="showCartPopup">
				<view class="cart-icon">
					<u-icon name="shopping-cart" size="24" color="#DB0000"></u-icon>
					<view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
				</view>
				<view class="cart-price">
					<text class="price-text">¥{{ cartTotal }}</text>
					<u-icon name="arrow-down" size="12" color="#666666"></u-icon>
				</view>
			</view>
			<view class="checkout-btn" @click="goCheckout">
				<text class="checkout-text">去下单</text>
			</view>
		</view> -->

		<!-- 商品详情弹出框 -->
		<ProductDetailPopup 
			v-if="selectedProduct && selectedProduct.id"
			:show="productDetailShow" 
			:product="selectedProduct"
			:product-type="'food'"
			:spec-options="specOptions"
			:flavor-options="flavorOptions"
			@close="productDetailShow = false"
			@add-to-cart="handleAddToCart"
			@cart-updated="handleCartUpdated"
		/>

		<!-- 购物车弹出框 -->
		<CartPopup 
			:show="cartShow" 
			:cart-list="cartList"
			@close="cartShow = false"
			@toggle-select-all="handleToggleSelectAll"
			@update-item-check="handleUpdateItemCheck"
			@increase-quantity="handleIncreaseQuantity"
			@decrease-quantity="handleDecreaseQuantity"
			@clear-cart="handleClearCart"
			@cart-data-updated="handleCartDataUpdated"
		/>
	</view>
</template>

<script>
import ProductDetailPopup from '@/components/ProductDetailPopup.vue'
import CartPopup from '@/components/CartPopup.vue'
import { getFoodProductDetail } from '@/api/restaurant.js'

export default {
	components: {
		ProductDetailPopup,
		CartPopup
	},
	data() {
		return {
			productInfo: null,
			quantity: 1,
			// 商品详情弹出框相关
			productDetailShow: false,
			selectedProduct: {},
			specOptions: [],
			flavorOptions: [],
			// 购物车相关
			cartShow: false,
			cartList: [],
		}
	},
	computed: {
		// 购物车商品数量
		cartCount() {
			return this.cartList.reduce((total, item) => total + item.quantity, 0)
		},
		// 购物车总价
		cartTotal() {
			return this.cartList
				.filter(item => item.checked)
				.reduce((total, item) => total + (parseFloat(item.price) * item.quantity), 0)
				.toFixed(2)
		}
	},
	onLoad(options) {
		// 获取商品ID
		if (options.id) {
			this.loadProductDetail(options.id)
		}
	},
	methods: {
		// 加载商品详情
		loadProductDetail(productId) {
			getFoodProductDetail({ id: productId }).then(res => {
				if (res.code == 200) {
					console.log('商品详情页面完整API响应:', res);
					console.log('商品详情页面商品数据:', res.data);
					console.log('商品详情页面所有字段:', Object.keys(res.data));
					
					this.productInfo = {
						id: res.data.id,
						name: res.data.name,
						image: res.data.image,
						price: res.data.price,
						saleCount: res.data.saleCount || 0,
						introduce: res.data.introduce,
						vipPrice: res.data.vipPrice,
						// 保存完整的商品数据，包含规格信息
						...res.data
					}
					
					// 设置选中的商品详情（用于弹窗显示）
					this.selectedProduct = {
						...res.data,
						// 确保有必要的字段
						quantity: 1,
						attributeIds: ''
					}
					
					// 处理规格数据
					if (res.data.attributeKeys && res.data.attributeKeys.length > 0) {
						console.log('商品详情页面规格键数据:', res.data.attributeKeys);
						console.log('商品详情页面规格键数据结构:', res.data.attributeKeys[0]);
						console.log('商品详情页面规格值数据:', res.data.attributeValues);
						
						// 检查规格键数据是否包含规格值
						if (res.data.attributeKeys[0] && res.data.attributeKeys[0].attributeValues) {
							console.log('商品详情页面规格键中包含规格值:', res.data.attributeKeys[0].attributeValues);
						}
						
						// 直接传递原始数据给组件
						this.specOptions = res.data.attributeKeys;
						this.productInfo.attributeValues = res.data.attributeValues;
						this.selectedProduct.attributeValues = res.data.attributeValues;
						
						console.log('商品详情页面传递的规格选项:', this.specOptions);
					} else {
						this.specOptions = [];
					}
				}
			}).catch(err => {
				console.error('获取商品详情失败:', err)
				uni.showToast({
					title: '获取商品详情失败',
					icon: 'none'
				})
			})
		},
		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--
			}
		},
		
		// 增加数量
		increaseQuantity() {
			this.quantity++
		},
		
		// 去下单
		goCheckout() {
			uni.showToast({
				title: '跳转到下单页面',
				icon: 'success'
			})
		},
		
		// 显示商品详情弹出框
		showProductDetailPopup() {
			this.productDetailShow = true
		},
		
		// 处理加入购物车（由ProductDetailPopup组件处理API调用，这里只更新UI）
		handleAddToCart(cartItem) {
			console.log('商品详情页面: 收到加入购物车事件', cartItem);
			this.cartShow = true
		},
		
		// 处理购物车数据更新
		handleCartUpdated(newCartData) {
			console.log('商品详情页面: 收到购物车数据更新', newCartData);
			this.cartList = newCartData;
		},
		
		// 处理购物车数据更新（来自CartPopup组件）
		handleCartDataUpdated(newCartData) {
			console.log('商品详情页面: 收到CartPopup购物车数据更新', newCartData);
			this.cartList = newCartData;
		},
		
		// 显示购物车弹出框
		showCartPopup() {
			this.cartShow = true
		},
		
		// 购物车相关方法 - 这些操作现在由CartPopup组件内部处理
		handleToggleSelectAll(selectAll) {
			// 购物车选择操作由CartPopup组件内部处理
			console.log('商品详情页面: 收到全选状态变化', selectAll);
		},
		
		handleUpdateItemCheck(item) {
			// 购物车商品选择操作由CartPopup组件内部处理
			console.log('商品详情页面: 收到商品选择状态变化', item);
		},
		
		handleIncreaseQuantity(item) {
			// 购物车商品数量增加操作由CartPopup组件内部处理
			console.log('商品详情页面: 收到商品数量增加', item);
		},
		
		handleDecreaseQuantity(item) {
			// 购物车商品数量减少操作由CartPopup组件内部处理
			console.log('商品详情页面: 收到商品数量减少', item);
		},
		
		handleClearCart() {
			// 购物车清空操作由CartPopup组件内部处理
			console.log('商品详情页面: 收到清空购物车请求');
		},
		
	}
}
</script>

<style lang="scss" scoped>
.product-detail-page {
	min-height: 100vh;
	background-color: #FFFFFF;
	padding-bottom: 100rpx;
	
	.back-btn {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.product-image-section {
		width: 100%;
		height: 500rpx;
		
		.product-image {
			width: 100%;
			height: 100%;
		}
	}
	
	.product-info-section {
		padding: 30rpx;
		
		.product-name {
			font-size: 36rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 20rpx;
			line-height: 1.4;
		}
		
		.price-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.price-info {
				display: flex;
				align-items: baseline;
				
				.currency {
					font-size: 28rpx;
					color: #DB0000;
				}
				
				.price {
					font-size: 48rpx;
					color: #DB0000;
					font-weight: 600;
				}
			}
			
			.add-btn {
				width: 60rpx;
				height: 60rpx;
				background-color: #DB0000;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.sales-info {
			font-size: 24rpx;
			color: #999999;
		}
	}
	
	.divider {
		height: 20rpx;
		background-color: #F5F5F5;
	}
	
	.product-description {
		padding: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		
		.description-item {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 15rpx;
			line-height: 1.5;
		}
	}
	
	.quantity-selector {
		padding: 0 30rpx 30rpx;
		
		.quantity-controls {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 30rpx;
			
			.quantity-btn {
				width: 60rpx;
				height: 60rpx;
				background-color: #DB0000;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.quantity-text {
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
				min-width: 60rpx;
				text-align: center;
			}
		}
	}
	
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		border-top: 2rpx solid #F0F0F0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		.cart-info {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.cart-icon {
				position: relative;
				display: flex;
				align-items: center;
				
				.cart-badge {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					background-color: #DB0000;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 20rpx;
					min-width: 24rpx;
					text-align: center;
				}
			}
			
			.cart-price {
				display: flex;
				align-items: center;
				gap: 10rpx;
				
				.price-text {
					font-size: 32rpx;
					color: #DB0000;
					font-weight: 600;
				}
			}
		}
		
		.checkout-btn {
			background-color: #DB0000;
			padding: 20rpx 40rpx;
			border-radius: 8rpx;
			
			.checkout-text {
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
		}
	}
}
</style>
